<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水波纹</title>
  <script src="../412/lib/vue.js"></script> 
  <link rel="stylesheet" href="../412/lib/vue.js">
  <style>
    .btn{
      width: 200px;
      height:200px;
      padding:0 15px;
      border-radius: 8px;
      text-align: center;
      background: orange;
      color:#fff;
      font-size: 20px;
      outline: none;
      border:none;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
  </style>
</head>
<body>
    <div id="app">
        <h2>水波纹指令 </h2>
        <button class="btn" v-shuibowen="bg1">立即登录</button>
        <button class="btn" v-shuibowen="bg2">马上注册</button>
    </div>
    <script>

      Vue.directive("shuibowen",{
        bind(el,binding){
          el.addEventListener("click",function(e){
            console.log("click")
            var e = e ||window.event
            var clientX = e.clientX;
            var clientY = e.clientY;
            
            var left = el.offsetLeft;
            var top = el.offsetTop
           
            var x = clientX- left;
            var y = clientY - top ;

            console.log(x,y)
            var span = document.createElement("span")
            span.style.position = "absolute"
            span.style.background = binding.value || 'rgba(0,0,0,0.5)';
            span.style.opacity = 1;
            span.style.borderRadius= "50%"

            el.append(span)
            var width = 0;
            var height = 0;
            var opacity = 1;

            var timer = setInterval(() => {
                width+=5;
                height+=5;
                opacity-= 0.03;
                if(opacity>0){
                  span.style.width = width+'px'
                  span.style.height  = height+'px'
                  span.style.opacity  = opacity;
                  span.style.left = x - span.clientWidth/2 + 'px'
                  span.style.top = y - span.clientHeight/2 + 'px'


                }else{
                  clearInterval(timer)
                  timer = null;
                  span.remove();
                }
            }, 20);


          },false)
        },
        inserted(el,binding){

        }
      })

      const vm = new Vue({
        el:"#app",
        data:{
          bg1:'rgba(0,0,0,0.1)',
          bg2:'blue'
        }
      })
    </script>
</body>
</html>